﻿@page "/features/border-radius"

<DocsPage>
    <DocsPageHeader Title="Border Radius" SubTitle="Use border classes to quickly change border-radius." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Default Radius">
                <Description>
                    <MudText>When using the classes without any size ending, it will apply the current theme's default border-radius.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="BorderRadiusDefaultExample">
                <BorderRadiusDefaultExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Pill and Circle">
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="BorderRadiusPillnCircleExample">
                <BorderRadiusPillnCircleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Remove Border Radius">
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="BorderRadiusRemoveExample">
                <BorderRadiusRemoveExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Different strengths">
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="BorderRadiusSizeExample">
                <BorderRadiusSizeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Rounding Sides">
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="BorderRadiusSidesExample">
                <BorderRadiusSidesExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Rounding Corners">
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="BorderRadiusCornerExample">
                <BorderRadiusCornerExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>